<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>购物车</title>
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../../assets/img/favicon.ico">

    <!-- CSS
	============================================ -->
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,700,800,900%7CPoppins:300,400,500,600,700,800,900"
          rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../assets/css/vendor/bootstrap.min.css">
    <!-- Font-awesome CSS -->
    <link rel="stylesheet" href="../../assets/css/vendor/font-awesome.min.css">
    <!-- Slick slider css -->
    <link rel="stylesheet" href="../../assets/css/plugins/slick.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="../../assets/css/plugins/animate.css">
    <!-- Nice Select css -->
    <link rel="stylesheet" href="../../assets/css/plugins/nice-select.css">
    <!-- jquery UI css -->
    <link rel="stylesheet" href="../../assets/css/plugins/jqueryui.min.css">
    <!-- main style css -->
    <link rel="stylesheet" href="../../assets/css/style.css">

    <script src="../../assets/js/plugins/utils.js"></script>

    <script src="../../assets/js/vendor/axios.min.js"></script>

    <script src="../../assets/js/vendor/vue.min.js"></script>

</head>

<body>
<!-- Start Header Area -->
<header class="header-area" id="header"></header>
<!-- end Header Area -->



<main>
    <!-- breadcrumb area start -->
    <div class="breadcrumb-area breadcrumb-img bg-img" data-bg="../../assets/img/banner/shop.jpg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap">
                        <nav aria-label="breadcrumb">
                            <h3 class="breadcrumb-title">主页</h3>
                            <ul class="breadcrumb justify-content-center">
                                <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
                                <li class="breadcrumb-item active" aria-current="page">订单详情</li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end -->

    <!-- cart main wrapper start -->
    <div class="cart-main-wrapper section-padding" id="cart">
        <div class="container">
            <div class="section-bg-color">
                <div class="row">
                    <div class="col-lg-12">
                        <!-- Cart Table Area -->
                        <div class="cart-table table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th class="pro-thumbnail">缩略图</th>
                                    <th class="pro-title">名称</th>
                                    <th class="pro-price">价格</th>
                                    <th class="pro-quantity">数量</th>
                                    <th class="pro-subtotal">小计</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="product in orderInfo">
                                    <td class="pro-thumbnail"><a :href="'product-details.html?id='+product.id"><img
                                            class="img-fluid" :src="product.path" alt="加载失败"/></a></td>
                                    <td class="pro-title"><a :href="'product-details.html?id='+product.id">{{product.name}}</a>
                                    </td>
                                    <td class="pro-price"><span>¥{{product.new_price}}</span></td>
                                    <td class="pro-quantity">
                                        <span>{{product.num}}</span>
                                    </td>
                                    <td class="pro-subtotal"><span>¥{{product.total_price}}</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- Cart Update Option -->
                        <!--                        <div class="cart-update-option d-block d-md-flex justify-content-between">-->
                        <!--                            <div class="apply-coupon-wrapper">-->
                        <!--                                <form action="#" method="post" class=" d-block d-md-flex">-->
                        <!--                                    <input type="text" placeholder="输入优惠卷码" required/>-->
                        <!--                                    <button class="btn btn-sqr">使用优惠卷</button>-->
                        <!--                                </form>-->
                        <!--                            </div>-->
                        <!--                            <div class="cart-update">-->
                        <!--                                <a href="#" class="btn btn-sqr">更新购物车</a>-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- cart main wrapper end -->
</main>

<!-- Scroll to top start -->
<div class="scroll-top not-visible">
    <i class="fa fa-angle-up"></i>
</div>
<!-- Scroll to Top End -->


<!-- footer area start -->
<footer class="black-bg" id="footer"></footer>
<!-- footer area end -->


<!-- JS
============================================ -->

<!-- Modernizer JS -->
<script src="../../assets/js/vendor/modernizr-3.6.0.min.js"></script>
<!-- jQuery JS -->
<script src="../../assets/js/vendor/jquery-3.3.1.min.js"></script>

<script src="../../assets/js/user/order.js"></script>
<!-- Popper JS -->
<script src="../../assets/js/vendor/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="../../assets/js/vendor/bootstrap.min.js"></script>
<!-- slick Slider JS -->
<script src="../../assets/js/plugins/slick.min.js"></script>
<!-- Countdown JS -->
<script src="../../assets/js/plugins/countdown.min.js"></script>
<!-- Nice Select JS -->
<script src="../../assets/js/plugins/nice-select.min.js"></script>
<!-- jquery UI JS -->
<script src="../../assets/js/plugins/jqueryui.min.js"></script>
<!-- Image zoom JS -->
<script src="../../assets/js/plugins/image-zoom.min.js"></script>
<!-- image loaded js -->
<script src="../../assets/js/plugins/imagesloaded.pkgd.min.js"></script>
<!-- masonry  -->
<script src="../../assets/js/plugins/masonry.pkgd.min.js"></script>
<!-- mailchimp active js -->
<script src="../../assets/js/plugins/ajaxchimp.js"></script>
<!-- contact form dynamic js -->
<script src="../../assets/js/plugins/ajax-mail.js"></script>
<!-- Main JS -->
<!--    <script src="../../assets/js/main.js"></script>-->
<script>
    $("#header").load("../common/header.html");
    $("#footer").load("../common/footer.html");
</script>
<!--<script>-->
<!--    $('.qtybtn').on('click', function () {-->
<!--        var $button = $(this);-->
<!--        var oldValue = $button.parent().find('input').val();-->
<!--        alert(oldValue);-->
<!--        if ($button.hasClass('inc')) {-->
<!--            var newVal = parseInt(oldValue) + 1;-->
<!--            alert("加一成功")-->
<!--        } else {-->
<!--            if (oldValue > 1) {-->
<!--                var newVal = parseInt(oldValue) - 1;-->
<!--                alert("减一成功")-->
<!--            } else {-->
<!--                alert("归一");-->
<!--                newVal = 1;-->
<!--            }-->
<!--        }-->
<!--        alert(newVal);-->
<!--        $button.parent().find('input').val(newVal);-->
<!--    });-->
<!--</script>-->
</body>

</html>